[やってみた]Amazon Q in IDEsで、Amazon QとAmazon CodeWhispererの組み合わせを使ってみた #AWSreInvent

AWS re:Invent 2023

#AWS

#Amazon Q

#AI

#Amazon CodeWhisperer

#VSCode拡張機能

Takaaki Kakei

2023.12.04

はじめに

2023年11月27日～12月1日 (米国太平洋標準時) に開催された AWS re:Invent 2023。 2023/11/29 の keynote では Amazon Q(プレビュー)が発表されました。

Amazon Q とは、生成人工知能 (AI) を活用した会話型アシスタントです。 Amazon Q は AI を活用して、AWS の様々なサービスにおけるユーザーや開発者体験を向上させます。具体的には、以下のような機能が公開されています。

Amazon Q in the console
Amazon Q in IDEs
Amazon Q and other services
- Amazon Q (For Business Use)
- Amazon Q in AWS Chatbot
- Amazon Q in Amazon CodeCatalyst
- Amazon Q in Amazon Connect
- Amazon Q in Amazon QuickSight
- Amazon Q in Reachability Analyzer

本記事では「Amazon Q in IDEs」に焦点を当てた、やってみたブログです。

3行まとめ

Amazon Q は Visual Studio Code などの IDE において、AWS Toolkit の一部として利用ができます
AWSに関する質問・コードに関する一般的な質問・特定コードの説明やバグ修正やリファクタリング・ワークスペース全体の情報を元にした実装計画の生成・コード言語バージョンの更新など、ソフトウェア開発プロセスを支援します。
利用可能な機能は、認証方法と Amazon CodeWhisperer のライセンスによって異なります

やってみた

Amazon Q は 2023/12/4 時点で、Visual Studio Code などの一部 IDE の拡張機能として利用できます。今回は Visual Studio Code で試してみます。

Amazon Q is currently available as an extension in Visual Studio Code and in JetBrains.

Amazon Q in IDEs - Amazon Q

Visual Studio Code でのセットアップ

Visual Studio Code の拡張機能で、AWS Toolkit をインストールします。詳しいインストール方法は以下の公式ドキュメントを参照ください。

Installing the AWS Toolkit for Visual Studio Code - AWS Toolkit for VS Code

インストールが完了すると、IDE ウィンドウの端に AWS ロゴが表示されるので選択します。いくつかある項目から[Amazon Q(PREVIEW)]を選択し、[Sign in to get started]をクリックします。

クリックすると以下の 3 項目が表示されます。

Amazon Q + CodeWhisperer
Amazon Explore
Amazon CodeCatalyst

今回は、[Amazon Q + CodeWhisperer]を試してみます。

認証方法は以下の 2 つから選択できます。

Use for free with AWS Builder ID
- CodeWhisperer Professional ライセンスがない場合
- 無料
- 一部機能が利用不可（後述）
Sign in with IAM Identity Center(SSO)
- CodeWhisperer Professional ライセンスがある場合
- 有料

今回は [Use for free with AWS Builder ID] で認証します。

[Use for free with AWS Builder ID]をクリックすると、ブラウザに遷移する旨のポップアップが表示されるので、許可します。

ブラウザ上のログインページで表示されるコードが、Visual Studio Code の画面上のポップアップと同じであることを確認して、次に進みます。

Amazon Builder IDを利用した認証画面が出ます。未作成の場合は新規作成してください。

AWS Toolkit によるデータアクセスを許可するかどうかを尋ねるポップアップが表示されるので、[Allow]をクリックします。

成功すると、ブラウザ側で設定完了の旨が表示されます。

Visual Studio Code 側を確認すると、画面左袖に Amazon Q のアイコンとチャットパネルが表示されます。

Chat機能

Chat with Amazon Q in IDEs - Amazon Q

チャットパネルで、以下に関する質問が可能な機能です。

AWS での構築 (AWS サービスの選択、制限、ベストプラクティスを含む)
プログラミング言語の構文やアプリケーション開発を含む、一般的なソフトウェア開発の概念
コードの説明、コードのデバッグ、単体テストの作成を含むコードの作成

チャットパネルはタブで複数の会話に切り替えることができます。

AWS について質問

How do I choose between AWS Lambda and Amazon EC2 for a scalable web application backend?と質問すると、問題なく回答してくれました。

プログラム言語について質問

How do I write an app in React?と質問すると、問題なく回答してくれました。

Explain and update code機能

Explain and update code with Amazon Q - Amazon Q

IDE 内のコードの特定の行を説明および更新できる機能です。特定コードを選択した状態でチャットパネルに質問を入力したり、右クリックからショートカットを選ぶことで利用できます。利用する際にチャットパネルを経由するので、実態としては前述のChat機能における、「コードの説明、コードのデバッグ、単体テストの作成を含むコードの作成」をテンプレートとして利用しやすくする機能に見受けられました。右クリックからショートカットには、次のようなオプションがあります。

Explain
- 自然言語でコードを説明
Refactor
- コードの可読性や効率を改善
Fix
- コードをデバッグ
Optimize
- コードのパフォーマンスを向上
Send to prompt
- ハイライトされたコードをAmazon Qチャットパネルに送信

検証用にtmp.pyを作成します。

def hello():
    print("Hello World!")
    return

選択したコードについてチャットパネルで質問

関数全体を選択した上で、チャットパネルにExplain selected codeと入力して送信すると、選択コードについて解説してくれました。

コード選択 > 右クリック > Explain

自然言語で選択コードを説明してくれます。回答はチャットパネルに表示されます。

コード選択 > 右クリック > Refactor

選択コードの可読性や効率する提案をしてくれます。回答はチャットパネルに表示されます。

コード選択 > 右クリック > Fix

選択コードのデバッグ案を提案してくれます。回答はチャットパネルに表示されます。

コード選択 > 右クリック > Optimize

選択コードのパフォーマンス向上案を提案してくれます。回答はチャットパネルに表示されます。

コード選択 > 右クリック > Send to Prompt

選択コードをチャットパネルに転記してくれます。転記後、即時送信されないので質問を記載してから送信することができます。

補足

有料機能について

[Use for free with AWS Builder ID] で認証した場合、以下のような一部機能は使用できません。

Amazon Q feature development - Amazon Q
- 現在のプロジェクトのコンテキストを使用して、どのようなコード変更を行う必要があるかを含む詳細な実装計画を生成する機能。コンテキストにはワークスペース全体の情報を利用するため実装に沿った実装計画を生成可能。
- チャットパネルで/devで利用可能。
Amazon Q Code Transformation - Amazon Q
- ファイルのコード言語バージョンを更新できる機能。例えば、Java 8 および Java 11 コードを Java 17 コードにアップグレードなど。
- チャットパネルで/transformで利用可能。